これからはじめるGulp #4：gulp-connectモジュールを使ったローカルサーバの起動

Gulp - Solo Advent Calendar 2014

#JavaScript

#gulp.js

野中龍一

2014.12.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

前回のこれからはじめるGulp #3：gulp.watchでファイルの変更を監視しタスクを実行するで変更を監視してタスクを実行できるようになりました。今回は監視と平行して走らせるgulp-connectを使ったローカルサーバの起動を試します。

準備

ローカルサーバにアクセスした時に表示させるindex.htmlを作っておきましょう。ローカルサーバのrootディレクトリはprodです。

index.htmlを作る

srcディレクトリにindex.htmlを作ります。このHTMLはローカルサーバー起動時にprodディレクトリにコピーします。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Gulp Hello World</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>Hello World</h1>
  
</body>
</html>

gulp-connectのインストールと読み込み

gulp-connectを--save-devを付けて開発用としてインストールします。

$ sudo npm install --save-dev gulp-connect
Password:
gulp-connect@2.2.0 node_modules/gulp-connect
├── connect-livereload@0.3.2
├── event-stream@3.1.7 (duplexer@0.1.1, stream-combiner@0.0.4, from@0.1.3, pause-stream@0.0.11, map-stream@0.1.0, split@0.2.10, through@2.3.6)
├── tiny-lr@0.0.7 (debug@0.8.1, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)
├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, through2@0.5.1, vinyl@0.2.3, chalk@0.5.1, dateformat@1.0.11, multipipe@0.1.2, lodash.template@2.4.1)
└── connect@2.17.3 (parseurl@1.0.1, response-time@1.0.0, connect-timeout@1.1.0, cookie@0.1.2, debug@0.8.1, cookie-signature@1.0.3, pause@0.0.1, fresh@0.2.2, vhost@1.0.0, qs@0.6.6, basic-auth-connect@1.0.0, on-headers@0.0.0, bytes@1.0.0, serve-favicon@2.0.0, morgan@1.1.1, errorhandler@1.0.1, cookie-parser@1.1.0, csurf@1.2.0, method-override@1.0.2, body-parser@1.2.2, compression@1.0.2, type-is@1.2.0, express-session@1.2.1, serve-index@1.0.3, multiparty@2.2.0, serve-static@1.1.0)

インストールが終わったらgulpfile.jsファイルに読み込みます。

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');

...

copyタスクを作る

今回ローカルサーバのrootディレクトリにprodディレクトリを指定します。srcディレクトリに保存されているindex.htmlをprodディレクトリにコピーしなければHTMLを表示できません。そこで前回作成したgulpfile.jsをベースにcopyタスクを追加します。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//copyタスクをここに追加

gulp.task('watch', ['sass'], function(){
  var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

gulp.task('default', ['sass']);

copyタスク

copyタスクはstream内でSassなどのモジュール（.pipe(sass())）を指定せず、gulp.dest()で保存先だけ指定します。Grantの場合はgrunt-contrib-copyモジュールを使って実現しますが、Gulpはメソッドだけで実現できるんですね。

gulp.task('copy', function(){
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./prod'));
});

copyタスクを試す

copyタスクを単体で実行してprodにHTMLがコピーされることを確認します。

$ gulp copy
[21:33:27] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[21:33:27] Starting 'copy'...
[21:33:27] Finished 'copy' after 4.85 ms

$ tree prod
prod
├── css
│   └── style.css
└── index.html

prodにindex.htmlがコピーされました。

監視対象にHTMLを追加する

前回作成したwatchタスクにcopyタスクを追加します。イベントリスナーを使ったログ表示はわかりにくくなってしまうため削除しておきます。

gulp.task('watch', ['sass', 'copy'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

この時点でgulpfile.jsはこのようになります。

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');

//sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//copy
gulp.task('copy', function(){
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./prod'));
});

//watch
gulp.task('watch', ['sass', 'copy'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('default', ['sass']);

watchタスクをチェックする

watchタスクを実行して、HTMLの変更を監視しcopyタスクが実行されるか確認します。

$ gulp watch
[21:48:10] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[21:48:10] Starting 'sass'...
[21:48:10] Finished 'sass' after 5.39 ms
[21:48:10] Starting 'copy'...
[21:48:10] Finished 'copy' after 1.25 ms
[21:48:10] Starting 'watch'...
[21:48:10] Finished 'watch' after 7.3 ms
[21:48:14] Starting 'sass'...
[21:48:14] Finished 'sass' after 1.28 ms
[21:48:17] Starting 'copy'...
[21:48:17] Finished 'copy' after 1.59 ms

問題なさそうです。

serveタスクを作る

まずは、ローカルサーバーを立ち上げるだけのタスクを作ります。

  gulp.task('serve', function(){
  connect.server();
});

serveタスクを追加したgulpfile.jsはこうなります。

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');

//sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//copy
gulp.task('copy', function(){
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./prod'));
});

//watch
gulp.task('watch', ['sass', 'copy'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

//server
gulp.task('serve', function(){
  connect.server();
});

gulp.task('default', ['sass']);

ローカルサーバーを起動する

serveタスクを起動してみます。rootディレクトリをprodにしていないので、gulpfile.jsが置かれているディレクトリがrootになります。

$ gulp serve
[11:36:46] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[11:36:46] Starting 'serve'...
[11:36:46] Finished 'serve' after 22 ms
[11:36:46] Server started http://localhost:8080

ローカルサーバーが起動したのでhttp://localhost:8080にアクセスしてみます。 rootディレクトリにindex.htmlがないのでディレクトリとファイルの一覧が表示されるはずです。

ディレクトリ一覧の中にあるprod（http://localhost:8080/prod/）をクリックすると冒頭で作成したindex.htmlが表示されるはずです。

ローカルサーバーを停止する

ローカルサーバーを止めるにはcontrol + Cを打ちます。

[11:36:46] Starting 'serve'...
[11:36:46] Finished 'serve' after 22 ms
[11:36:46] Server started http://localhost:8080
^C[12:01:47] Server stopped

rootディレクトリを指定する

rootディレクトリを指定するにはgulp-connectのserveメソッドにオプションを与えます。

gulp.task('serve', function(){
  connect.server({
    root: './prod'
  });
});

これでhttp://localhost:8080にアクセスした時にprodがrootディレクトリになりprod/index.htmlが見られるようになります。

defaultタスクで必要なタスクをすべて実行する

最後にwatchタスクとserveタスクをgulpコマンドだけで実行できるようにdefaultタスクを調整します。

gulp.task('default', ['sass']);

sassタスクが設定されていますがこれをwatchとserveに書き換えます。

gulp.task('default', ['watch', 'serve']);

gulpfile.js

gulpfile.jsは最終的にこのようになります。

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');

//sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//copy
gulp.task('copy', function(){
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./prod'));
});

//watch
gulp.task('watch', ['sass', 'copy'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

//server
gulp.task('serve', function(){
  connect.server({
    root: './prod'
  });
});

gulp.task('default', ['watch', 'serve']);

実行

defaultタスクを試してみます。defaultタスクは省略できるのでgulpコマンドのみで行えます。

$ gulp
[13:20:34] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[13:20:34] Starting 'sass'...
[13:20:34] Finished 'sass' after 5.32 ms
[13:20:34] Starting 'copy'...
[13:20:34] Finished 'copy' after 1.46 ms
[13:20:34] Starting 'watch'...
[13:20:34] Finished 'watch' after 7.47 ms
[13:20:34] Starting 'serve'...
[13:20:34] Finished 'serve' after 10 ms
[13:20:34] Starting 'default'...
[13:20:34] Finished 'default' after 8.98 μs
[13:20:34] Server started http://localhost:8080

変更を監視してタスクを実行し、ローカルサーバーも起動できました。あとは変更された時にブラウザをリロードするLiveReloadですね。もう少しのところですがLive Reloadは明日に回すことにします。